<template>
  <div class="content">
    <div class="md-layout">
      <div class="md-layout-item md-medium-size-100 md-size-100">
        <form>
          <md-card>
            <md-card-header style="padding:4px;" data-background-color="green">
              <h5 style="margin:0;" class="title">经销商信息</h5>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field>
                    <label>经销商</label>
                    <md-select v-model="formData.deaDealerName">
                      <md-option v-for="item in dealerList" :value="item.value" :key="item.id">{{ item.text }}</md-option>
                    </md-select>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field>
                    <label>金融机构</label>
                    <md-select v-model="formData.fstFininstName">
                      <md-option v-for="item in fstList" :value="item.value" :key="item.id">{{ item.text }}</md-option>
                    </md-select>
                  </md-field>
                </div>
              </div>
            </md-card-content>
            <md-card-header style="padding:4px;margin-top:4px;" data-background-color="green">
              <h4 style="margin:0;" class="title">基本信息</h4>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field md-clearable>
                    <label>姓名</label>
                    <md-input v-model="formData.indCustomerName" type="text" required></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field md-clearable>
                    <label>身份证号</label>
                    <md-input v-model="formData.indPaperNo" type="text" required maxlength="18"></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field md-clearable>
                    <label>银行卡号</label>
                    <md-input v-model="formData.indBankAccount" type="number" required maxlength="15"></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field md-clearable>
                    <label>手机号</label>
                    <md-input v-model="formData.indMobile" type="number" required maxlength="11"></md-input>
                    <md-button class="md-dense md-raised">点击获取</md-button>
                  </md-field>
                </div>
                <div v-show="showMarrige" class="md-layout-item md-small-size-100 md-size-50">
                  <div>
                    <label class="radioLabel">婚姻状况：</label>
                    <md-radio class="radioLabel" v-model="radio" :value="0">未婚</md-radio>
                    <md-radio class="radioLabel" v-model="radio" :value="1">已婚</md-radio>
                    <md-radio class="radioLabel" v-model="radio" :value="2">丧偶</md-radio>
                    <md-radio class="radioLabel" v-model="radio" :value="3">离异</md-radio>
                  </div>
                </div>
              </div>
            </md-card-content>
            <md-card-header v-show="showPartner" style="padding:4px;margin-top:4px;" data-background-color="green">
              <h5 style="margin:0;" class="title">配偶基本信息</h5>
            </md-card-header>
            <md-card-content v-show="showPartner">
              <div class="md-layout">
                <div class="md-layout-item md-small-size-100 md-size-33">
                  <md-field md-clearable>
                    <label>配偶姓名</label>
                    <md-input v-model="formData.gua1PartnerName" type="text" required></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-33">
                  <md-field md-clearable>
                    <label>配偶身份证号</label>
                    <md-input v-model="formData.gua1PartnerPaperNo" type="number" required maxlength="18"></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-33">
                  <md-field md-clearable>
                    <label>配偶手机号 </label>
                    <md-input v-model="formData.gua1Mobile" type="number" required maxlength="11"></md-input>
                  </md-field>
                </div>
              </div>
            </md-card-content>
            <md-card-header style="padding:4px;margin-top:4px;" data-background-color="green">
              <h5 style="margin:0;" class="title">验证码</h5>
            </md-card-header>
            <md-card-content>
              <div class="md-layout">
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <md-field md-clearable>
                    <label>验证码</label>
                    <md-input v-model="formData.vcode" type="text" required maxlength="6"></md-input>
                  </md-field>
                </div>
                <div class="md-layout-item md-small-size-100 md-size-50">
                  <div class="block">
                    <div class="input">
                      <md-checkbox class="radioLabel" v-model="agree">本人已阅读并同意《个人征信授权书》</md-checkbox>
                    </div>
                  </div>
                </div>
                <div class="md-layout-item md-size-100 text-right">
                  <md-button class="md-raised md-success">预审批提交</md-button>
                </div>
              </div>
            </md-card-content>
          </md-card>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default{
  name: 'preApprove',
  data: function () {
    return this.$store.state.preApprove.data
  },
  mounted () {
    this.formData.fstFininstName = '0'
  },
  methods: {
    ...mapActions({
      chgFst: 'chgFst',
      chgPartner: 'chgPartner'
    })
  },
  watch: {
    'formData.fstFininstName' () {
      this.chgFst()
    },
    radio () {
      this.chgPartner()
    }
  }
}
</script>
<style>
  .radioLabel {
    font-size: 14px;
    font-weight: 400;
    color: #AAAAAA !important;
    line-height: 1.4;
    top: 0;
    margin-right:25px;
}
</style>
